<template>
  <div>
    <header class="header">
      <!-- 具名插槽 -->
      <slot name="header" />
    </header>
    <main class="main">
      <!-- 匿名插槽 -->
      <div v-for="(item,i) in data" :key="i">
        <!-- 插槽传参 -->
      <slot :data="item" :index="i"/>
      </div>
    </main>
    <footer class="footer">
      <!-- 具名插槽 -->

      <slot name="footer" />

    </footer>
    <div>
      <slot name='dongtaicom'/>
    </div> 
  </div>
</template>
<script setup lang='ts'>
import { reactive } from 'vue';
import Slot from '../../views/slot.vue';
type names = {
  name: string,
  age: number
}
const data = reactive<names[]>([{
  name: '假面骑士极狐',
  age: 1
},
{
  name: '假面骑士霸牛',
  age: 2
},
{
  name: '假面骑士熊猫',
  age: 3
},
{
  name: '假面骑士狸猫',
  age: 4
}])

</script>
<style scoped lang='less'>
@Color: #fff;
@Height: 200px;
@Size: 20px;

.btnStyle {
  height: @Height;
  color: @Color;
  font-size: @Size;
}

.divCenter {
  display: flex;
  justify-content: center;
  align-items: center
}

.header {
  .btnStyle;
  .divCenter;
  background-color: aqua;
}

.main {
  .btnStyle;
  .divCenter;
  background-color: blue;
}

.footer {
  .btnStyle;
  .divCenter;
  background-color: mediumseagreen;
}
</style>